<template>
  <div>
    <div style="text-align: center;padding: 20px;">
      <h1>祝您工作愉快 :)</h1>
    </div>
    <div style="display: none;">
      <Row :gutter="20">
        <i-col
          :xs="12"
          :md="8"
          :lg="6"
          v-for="(infor, i) in inforCardData"
          :key="`infor-${i}`"
          style="height: 120px;padding-bottom: 10px;"
        >
          <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
            <count-to :end="infor.count" :decimals="infor.decimals" count-class="count-style"/>
            <p>{{ infor.title }}</p>
          </infor-card>
        </i-col>
      </Row>
  
      <Row>
        <Card shadow>
          <div style="right: 10px;z-index: 1000;position: absolute;">
            <DatePicker
              type="daterange"
              format="yyyy-MM-dd"
              v-model="dataRange"
              placeholder="选择时间段查询"
              style="width: 300px"
            ></DatePicker>
            <Button @click.stop="handleSearch" class="search-btn" icon="ios-search" type="primary">搜索</Button>
          </div>
  
          <example :data-range="cloneDataRange" style="height: 410px;"/>
        </Card>
      </Row>
    </div>
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import Example from "./example.vue";
import { getHomeOrderData } from "@/api/form";

export default {
  name: "home",
  components: {
    InforCard,
    CountTo,
    Example
  },
  data() {
    return {
      dataRange: [],
      cloneDataRange: {},
      inforCardData: [
        {
          title: "待付款订单",
          name: "waitPayTotal",
          icon: "md-card",
          count: 0,
          decimals: 0,
          color: "#2d8cf0"
        },
        {
          title: "今日秒杀订单",
          name: "secTotal",
          icon: "md-locate",
          count: 0,
          decimals: 0,
          color: "#19be6b"
        },
        {
          title: "今日团购订单",
          name: "groupTotal",
          icon: "md-contacts",
          count: 0,
          decimals: 0,
          color: "#ff9900"
        },
        {
          title: "今日成交金额",
          name: "totalMoney",
          icon: "md-cash",
          count: 0,
          decimals: 2,
          color: "#ed3f14"
        }
      ]
    };
  },
  created() {
    // 获取今日统计数据
    0 && getHomeOrderData().then(res => {
      const todayData = res.data.data;

      this.inforCardData = this.inforCardData.map(data => {
        data.count = todayData[data.name];
        return data;
      });
    });
  },
  methods: {
    handleSearch() {
      if (this.dataRange.length === 0) {
        this.$Message.error("请选择时间段");
        return;
      }
      this.cloneDataRange = {
        stime: Math.round(
          new Date(this.dataRange[0]).getTime() / 1000
        ).toString(),
        etime: Math.round(
          new Date(this.dataRange[1]).getTime() / 1000
        ).toString()
      };
    }
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
